<template>
	<view class="content">
		<view class="con-bg"></view>
		<view class="desc-con">
			<view class="mail-con">
				<view>群众姓名</view>
				<view style="width: 500rpx;">
					<u--input placeholder="请输入群众姓名" inputAlign="right" border="none" v-model="name"></u--input>
				</view>
			</view>
			<view class="mail-con">
				<view>联系方式</view>
				<view style="width: 500rpx;">
					<u--input placeholder="请输入联系方式" inputAlign="right" border="none" v-model="phone"></u--input>
				</view>
			</view>
			<view class="mail-con">
				<view>就诊科室</view>
				<view style="width: 500rpx;">
					<u--input placeholder="请输入就诊科室" inputAlign="right" border="none" v-model="dept"></u--input>
				</view>
			</view>
			<view class="mail-con">
				<view>患者或家属</view>
				<view>
					<u-radio-group size="29rpx" v-model="hzjs" placement="row" shape="circle" activeColor="#05A2FF">
						<u-radio :customStyle="{marginRight: '33rpx'}" label="患者" name="患者">
						</u-radio>
						<u-radio label="家属" name="家属">
						</u-radio>
					</u-radio-group>
				</view>
			</view>
			<view class="qus-con">
				<view>表扬感谢</view>
				<view style="margin-top: 23rpx;">
					<u--textarea v-model="bygx" :maxlength="300" :height="100" placeholder="请输入内容"></u--textarea>
				</view>
			</view>


			<view class="qus-con">
				<view>建议意见</view>
				<view style="margin-top: 23rpx;">
					<u--textarea v-model="jyyj" :maxlength="300" :height="100" placeholder="请输入内容"></u--textarea>
				</view>
			</view>
			<view class="qus-but" @click="submitForm">提交</view>
		</view>

		<view class="qus-bom"></view>
	</view>
</template>

<script>
	import {
		postboxApi
	} from "@/api/user"

	export default {
		data() {
			return {
				type: '',
				bygx: '',
				jyyj: "",
				name: "",
				phone: "",
				dept: "",
				hzjs: "患者",
			}
		},
		onLoad(opt) {
			this.type = opt.type
			if (this.type == 1) {
				uni.setNavigationBarTitle({
					title: '院长信箱'
				})
			} else {
				uni.setNavigationBarTitle({
					title: '书记信箱'
				})
			}

		},
		methods: {
			async submitForm() {
				if (!this.name) {
					uni.showToast({
						title: '请输入群众姓名',
						icon: 'none',
						duration: 2000
					})
					return
				}
				if (!this.phone) {
					uni.showToast({
						title: '请输入联系方式',
						icon: 'none',
						duration: 2000
					})
					return
				}
				// if (!this.dept) {
				// 	uni.showToast({
				// 		title: '请输入就诊科室',
				// 		icon: 'none',
				// 		duration: 2000
				// 	})
				// 	return
				// }
				uni.showLoading({
					title: '提交中...',
					mask: true
				})
				const res = await postboxApi({
					name: this.name,
					phone: this.phone,
					dept: this.dept,
					hzjs: this.hzjs,
					bygx: this.bygx,
					jyyj: this.jyyj,
					type: this.type
				})
				uni.hideLoading()
				uni.showToast({
					title: '提交成功',
					icon: 'success'
				});
				setTimeout(() => {
					uni.navigateBack()
				}, 1500)
			},
		}
	}
</script>

<style lang="scss" scoped>
	.con-bg {
		position: fixed;
		top: 0;
		left: 0;
		z-index: 1;
		width: 100vw;
		height: 100%;
		background-image: url('#{$IMG_URL}bgqus.png');
		background-repeat: no-repeat;
		background-size: cover;
	}

	.content {
		height: 100%;
		padding-top: 35rpx;
		box-sizing: border-box;

	}

	.desc-con {
		position: relative;
		z-index: 2;
		margin: 0 auto;
		width: 688rpx;
		font-size: 27rpx;
		color: #000000;
	}

	.qus-con {
		width: 688rpx;
		padding: 31rpx;
		box-sizing: border-box;
		background: #FFFFFF;
		border-radius: 19rpx;
		margin-bottom: 23rpx;
	}

	.mail-con {
		display: flex;
		align-items: center;
		justify-content: space-between;
		width: 688rpx;
		padding: 31rpx;
		box-sizing: border-box;
		background: #FFFFFF;
		border-radius: 19rpx;
		margin-bottom: 23rpx;
	}

	.qus-bom {
		height: calc(31rpx + env(safe-area-inset-bottom)/2);
	}

	.qus-but {
		width: 688rpx;
		height: 85rpx;
		background: #05A2FF;
		border-radius: 10rpx;
		display: flex;
		align-items: center;
		justify-content: center;
		color: #FFFFFF;
		font-size: 31rpx;

	}
</style>